<style lang="scss" scoped>
    .alert {
        margin-bottom: 5px;
    }
    .btn {
        margin-right: 5px;
    }
</style>
<template>
    <div class="alert alert-dismissible fade in"
         :class="['alert-' + currentAlert.style]"
         role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <p>
            <strong>{{ label }}</strong> {{ currentAlert.text }}
        </p>
        <p v-if="currentAlert.callbacks">
            <button type="button"
                    class="btn btn-xs"
                    v-for="(button, key) in currentAlert.callbacks"
                    :class="['btn-' + (key === 'cancel' ? 'default' : 'primary')]"
                    @click="clickCallback(button.callback)">{{ button.text }}
            </button>
        </p>
    </div>
</template>
<script>
    import { mapGetters, mapActions } from 'vuex'
    import _ from 'lodash'

    export default {
        name: 'Alert',
        props: ['gid'],
        computed: {
            ...mapGetters({
                alerts: 'alerts'
            }),
            /**
             * 根据gid获取当前弹出框信息
             */
            currentAlert () {
                return _.find(this.alerts, { gid: this.gid })
            },
            /**
             * 弹出框标签名
             */
            label () {
                let result = ''
                switch (this.currentAlert.style) {
                    case 'success':
                        result = '成功!'
                        break
                    case 'info':
                        result = '提示'
                        break
                    case 'warning':
                        result = '警告!'
                        break
                    case 'danger':
                        result = '错误!'
                        break
                }
                return result
            }
        },
        mounted () {
            // 超时关闭
            if (this.currentAlert.type === 'default' && _.isNumber(this.currentAlert.timeout) && this.currentAlert.timeout !== 0) {
                this.dismissOnTimeout()
            }
            // 关闭时触发
            $(this.$el).on('closed.bs.alert', () => {
                // 普通警告框有回掉定义时关闭时触发回掉
                if (this.currentAlert.type === 'default' && _.size(this.currentAlert.callback) > 0) {
                    this[this.currentAlert.callback[0]](this.gid)
                }

                // 确认警告框点击关闭后隐藏遮罩层
                if (this.currentAlert.type === 'confirm') {
                    this.hideBackdrop()
                }
            })
        },
        methods: {
            ...mapActions({
                removeAlert: 'removeAlert',
                hideBackdrop: 'hideBackdrop',
                showHelp: 'showHelp'
            }),
            /**
             * 超时后关闭弹出框
             */
            dismissOnTimeout () {
                setTimeout(() => {
                    this.dismiss()
                }, this.currentAlert.timeout)
            },
            /**
             * 关闭弹出框
             * 隐藏遮罩
             */
            dismiss () {
                $(this.$el).alert('close')
                this.hideBackdrop()
            },
            clickCallback (callback) {
                // 字符串
                if (_.isString(callback)) {
                    this.$store.dispatch(callback)
                }

                // 数组
                if (_.isArray(callback)) {
                    // 分发事件
                    this.$store.dispatch(callback[0], callback[1])
                }

                // 函数
                if (_.isFunction(callback)) {
                    callback()
                }

                // 关闭警告框
                this.dismiss()
            }
        }
    }
</script>
